<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单评论</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>


      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入评论内容搜索"
                    v-model="searchContent"
                    clearable
                    @clear="getOrderComments"
          >
            <el-button slot="append" icon="el-icon-search" @click="getOrderComments"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addOrderComment">添加评论</el-button>
        </el-col>
      </el-row>

      <el-table :data="orderCommentList" border stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单名" prop="demands.demands"></el-table-column>
        <el-table-column label="评论用户" prop="ordersVo.demandUsername"></el-table-column>
        <el-table-column label="评价类型" prop="commentType">
          <template slot-scope="scope">
            <span v-if="scope.row.commentType === -1">
              差评
            </span>
            <span v-if="scope.row.commentType === 0">
              中评
            </span><span v-if="scope.row.commentType === 1">
              好评
            </span>
          </template>
        </el-table-column>
        <el-table-column label="评论内容" prop="orderCommentContent"></el-table-column>
        <el-table-column label="是否匿名" prop="isAnonymous">
          <template slot-scope="scope">
            <span v-if="scope.row.isAnonymous === 1">
              匿名
            </span>
            <span v-if="scope.row.isAnonymous === 0">
              不匿名
            </span>
          </template>
        </el-table-column>
        <el-table-column label="评价晒图" prop="createdTime">
          <template slot-scope="scope" v-if="scope.row.commentImgs !== null">
            <el-image
              style="width: 30%;cursor: pointer;"
              :src="scope.row.commentImgs"
              :preview-src-list="imgList">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="回复人" prop="ordersVo.receiveUsername"></el-table-column>
        <el-table-column label="回复内容" prop="replyContent"></el-table-column>
        <el-table-column label="评论状态" prop="isShow">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              :inactive-value=0
              :active-value=1
              @change="changeOrderCommentStatus(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" style="display: inline-block;" width="160px">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="修改评论" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row.orderCommentId)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除评论" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" @click="deleteOrderComment(scope.row.orderCommentId)"
                         size="mini"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    </el-card>

          <el-dialog
            title="添加评论"
            :visible.sync="addDialogVisible"
            width="50%"
            :close-on-click-modal="false"
            @close="addDialogClosed">
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="80px">
              <el-form-item label="评论订单" prop="demands">
                <el-select v-model="addForm.demands" placeholder="请选择" :change="changeDemands(addForm.demands)" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.orderId"
                    :label="item.demands.demands"
                    :value="item.orderId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评价类型" prop="commentType">
                <el-select v-model="addForm.commentType" placeholder="请选择" :change="changeCommentType(addForm.commentType)" clearable>
                  <el-option
                    v-for="item in commentTypeOptions"
                    :key="item.typeId"
                    :label="item.commentType"
                    :value="item.typeId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评论内容" prop="orderCommentContent">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入内容"
                  v-model="addForm.orderCommentContent">
                </el-input>
              </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrderComment">确 定</el-button>
      </span>
          </el-dialog>

          <el-dialog
            title="修改评论"
            :visible.sync="editDialogVisible"
            width="50%"
            :close-on-click-modal="false"
            @close="editDialogClosed">
            <el-form :model="editForm" label-width="70px">
              <el-form-item label="订单名" prop="demands.demands">
                <el-input v-model="editForm.demands.demands" disabled></el-input>
              </el-form-item>
              <el-form-item label="评价类型" prop="commentType">
                <el-select v-model="editForm.commentType" placeholder="请选择" :change="changeCommentType(addForm.commentType)" clearable>
                  <el-option
                    v-for="item in commentTypeOptions"
                    :key="item.typeId"
                    :label="item.commentType"
                    :value="item.typeId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="评论内容" prop="orderCommentContent">
                <el-input v-model="editForm.orderCommentContent"></el-input>
              </el-form-item>
              <el-form-item label="回复内容" prop="replyContent">
                <el-input v-model="editForm.replyContent"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOrderComment()">确 定</el-button>
      </span>
          </el-dialog>

  </div>
</template>

<script>

    import {
        adminAddOrderComment,
        changeOrderCommentById, deleteOrderCommentById,
        getAllOrderCommentsByPage, selectCommentById
    } from "../../assets/api/orderComment";
    import {selectAllOrders} from "../../assets/api/orderApi";

    export default {
        name:'orderComments',
        data() {
            return {
                orderCommentList: [],
                searchContent: '',
                pageNum: 1,
                pageSize: 5,
                total: 0,
                addDialogVisible: false,
                addForm: {demands:'',commentType:'',orderCommentContent:''},
                addFormRules: {
                    demands: {required: true, message: '请选择要评论的订单', trigger: 'change'},
                    orderCommentContent: {required: true, message: '请输入评论内容', trigger: 'blur'},
                    commentType:{required: true, message: '请选择评价的类型', trigger: 'change'}
                },
                options: [],
                imgList:[],
                editDialogVisible: false,
                editForm: {demands:{demands:''},replyContent:'',orderCommentContent:''},
                commentTypeOptions: [
                    {"typeId": -1, "commentType": "差评"},
                    {"typeId": 0, "commentType": "中评"},
                    {"typeId": 1, "commentType": "好评"}],
            }
        },
        methods: {
            getOrderComments() {
                let data = {};
                data.orderCommentContent = this.searchContent;
                getAllOrderCommentsByPage(this.pageNum, this.pageSize, data).then((res) => {
                    if (res.code === 200) {
                        this.orderCommentList = res.data.records;
                        this.total = res.data.total;
                    }
                })
            },
            changeDemands(orderId) {
                this.addForm.orderId = orderId;
            },
            deleteOrderComment(orderCommentId) {
                const confirmResult = this.$confirm(
                    '此操作将永久删除该评论, 是否继续?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                    let data = {};
                    data.orderCommentId = orderCommentId;
                    deleteOrderCommentById(data).then((res) => {
                        if (res.code === 200) {
                            this.$message.success(res.message);
                            this.getOrderComments();
                        } else {
                            this.$message.error(res.message);
                        }

                    })
                }).catch(() => {
                    this.$message.info('已取消删除');
                });

            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getOrderComments();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getOrderComments();
            },
            changeOrderCommentStatus(orderComment) {
                changeOrderCommentById(orderComment).then((res) => {
                    if (res.code === 200) {
                        this.$message.success("修改评论状态成功！");
                    } else {
                        this.$message.error("修改评论状态失败！");
                    }
                })
            },
            changeCommentType(commentType) {
                this.addForm.commentType = commentType;
            },
            addOrderComment() {
                this.addDialogVisible = true;
                this.getOrderName();
            },
            addDialogClosed() {
                this.$refs.addFormRef.resetFields();
            },
            submitAddOrderComment() {
                this.$refs.addFormRef.validate(valid => {
                    if (!valid) return;
                    adminAddOrderComment(this.addForm).then((res) => {
                        if (res.code !== 200) {
                            return this.$message.error(res.message);
                        } else {
                            this.$message.success(res.message);
                            this.addDialogVisible = false;
                            this.getOrderComments();
                        }

                    })
                })
            },
            showEditDialog(orderCommentId) {
                this.editDialogVisible = true;
                let data = {};
                data.orderCommentId = orderCommentId;
                selectCommentById(data).then((res) => {
                    this.editForm = res.data;
                })
            },
            editDialogClosed() {
                this.$refs.editFormRef.resetFields();
            },
            getOrderName() {
                selectAllOrders().then((res) => {
                    this.options = res.data;
                })
            },
            changeOrderComment() {
                changeOrderCommentById(this.editForm).then((res) => {
                    if (res.code !== 200) {
                        this.$message.error(res.message);
                    } else {
                        this.editDialogVisible = false;
                        this.getOrderComments();
                        this.$message.success(res.message);
                    }

                })
            },
        },
        created() {
            this.getOrderComments();
        }
    }
</script>

<style scoped>
  @import "../../styles/css/global.css";

</style>
